<template>
  <div class="overAll add_page">
    <div class="search">
      <a-form layout="inline">
        <a-form-item label="用户姓名">
          <a-input
            v-model="searchList.userName"
            class="w260"
            @keyup.enter.native="search_click"
            placeholder="请输入用户姓名"
          />
        </a-form-item>

        <a-form-item label="角色">
          <a-select
            :allowClear="true"
            :value="searchRoleSelect"
            class="w200"
            @change="search_roleSelect"
            placeholder="请选择角色"
          >
            <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="状态">
          <a-select
            :allowClear="true"
            :value="searchRoleStatus"
            class="w200"
            placeholder="请选择状态"
            @change="search_status"
          >
            <a-select-option value="ACTIVE">有效</a-select-option>
            <a-select-option value="INACTIVE">无效</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item class="search_btn" label>
          <a-button @click="reset_click">重置</a-button>
          <a-button style="margin-left:20px" @click="search_click" type="primary">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="gray"></div>
    <div style="position:relative;">
      <div
        style="font-size:17px;left:30px;top:0px;font-weight:400;position:absolute;color:#474747;"
      >用户列表</div>
      <div class="content_table">
        <a-table
          @change="pagination_user"
          rowKey="id"
          :pagination="pagination_shop"
          :columns="columns"
          :data-source="data_commercial"
          :loading="loading"
        >
          <span
            slot="index"
            slot-scope="text, record, index"
          >{{ (pagination_shop.current - 1) * pagination_shop.pageSize + index + 1 }}</span>
          <span
            slot="roles"
            slot-scope="text, record"
          >{{ record.roleNameList.join(',') }}</span>
          <span
            slot="addTime"
            slot-scope="text, record"
          >{{ record.createTime | moment }}</span>
          <a slot="action_details" slot-scope="text">
            <span v-action="'pms:user:update'">
              <span @click="onChangeRole(text)">修改角色</span>
              <a-divider type="vertical" />
            </span>
            <span v-action="'pms:user:view'" @click="onViewUser(text)">查看详情</span>
          </a>
        </a-table>
      </div>
    </div>
    <a-drawer
      class="add_page_span"
      title="查看用户详情"
      placement="right"
      :closable="false"
      width="600"
      :visible="visibleModifyUser"
      @close="onClose_view"
    >
      <a-row>
        <a-col :span="12">
          <span>选择机构:</span>
          {{ this.findUserList.dingOrgName }}
        </a-col>
        <a-col :span="12">
          <span>选择部门:</span>
          {{ this.findUserList.dingDeptName }}
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="12">
          <span>手机号码:</span>
          {{ this.findUserList.mobile }}
        </a-col>
        <a-col :span="12">
          <span>电子邮箱:</span>
          {{ this.findUserList.email }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <span>选择人员:</span>
          {{ this.findUserList.userName }}
        </a-col>
        <a-col :span="12">
          <span>职级:</span>
          {{ this.findUserList.dingPosition }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <span>用户状态:</span>
          {{ this.findUserList.statusName }}
        </a-col>
        <a-col :span="12">
          <span>用户角色:</span>
          {{ this.findUserList.roleNameList ? this.findUserList.roleNameList.join(','): '' }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="17"></a-col>

        <a-col :span="5">
          <a-button @click="updateByDingUserBtn" style="margin-top:100px;" type>同步最新钉钉数据</a-button>
        </a-col>
      </a-row>
    </a-drawer>
    <!-- 更改角色 -->
    <a-modal
      title="修改角色"
      :visible="visibleModifyRoleModal"
      :confirm-loading="false"
      @ok="handleModifyRole"
      @cancel="handleCancelModify"
    >
      <a-row>
        <a-col :span="17">
          <a-select
            mode="multiple"
            class="w200"
            @change="search_roleSelect"
            v-model="roleSelectValue"
            placeholder="请选择角色"
          >
            <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">
              {{
                item.name
              }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import { findSelect } from '@/api/authority/role'
import { findUser, pageUser, updateUser, updateByDingUser } from '@/api/authority/user'

// 商户的基本表格头
const columns = [
  {
    align: 'center',
    title: '序号',
    scopedSlots: {
      customRender: 'index'
    }
  },
  {
    align: 'center',
    title: '用户名',
    dataIndex: 'userName'
  },
  {
    align: 'center',
    title: '角色',
    scopedSlots: {
      customRender: 'roles'
    }
  },
  {
    align: 'center',
    title: '状态',
    dataIndex: 'statusName'
  },

  {
    align: 'center',
    title: '创建者',
    dataIndex: 'creatorName'
  },
  {
    align: 'center',
    title: '所属机构',
    dataIndex: 'dingOrgName'
  },
  {
    align: 'center',
    title: '部门',
    dataIndex: 'dingDeptName'
  },
  {
    align: 'center',
    title: '创建时间',
    dataIndex: 'createTime',
    scopedSlots: {
      customRender: 'addTime'
    }
  },
  {
    align: 'center',
    title: '操作',
    scopedSlots: {
      customRender: 'action_details'
    }
  }
]
export default {
  inject: ['reload'],
  data () {
    return {
      searchRoleSelect: undefined,
      searchRoleStatus: undefined,
      dingUserId: '', // 用户Id
      findUserList: {},
      roleEdit: {},
      roleSelectValue: '',
      visibleModifyRoleModal: false,
      visibleModifyUser: false,
      roleList: [], // 角色下拉框
      searchList: {
        pageNumber: 1,
        pageSize: 10
      }, // 搜索列表
      pagination_shop: {
        current: 1,
        pageSize: 10,
        pageNumber: 1,
        total: 0,
        defaultCurrent: 1,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条`
      },

      loading: false,
      data_commercial: [],
      columns
    }
  },
  mounted () {
    this.queryData(this.searchList)
    // 获取下拉框

    // 获取角色
    findSelect().then(res => {
      if (res.success) {
        this.roleList = res.voList
      }
    })
  },

  methods: {
    reset_click () {
      this.searchList.roleId = ''
      this.searchList.status = ''
      this.searchList.userName = ''
      this.searchRoleSelect = ''
      this.searchRoleStatus = ''
      this.queryData(this.searchList)
    },
    // tableList数据
    queryData (option) {
      this.loading = true
      pageUser(option)
        .then(res => {
          if (res.success) {
            this.loading = false
            this.data_commercial = res.voList
            this.pagination_shop.total = res.totalNum
          } else {
            this.$notification.error({
              message: '提示',
              description: res.messages[0],
              duration: 8
            })
          }
        })
        .catch(err => {
          console.log(new Error(err))
        })
    },
    // 编辑
    updateByDingUserBtn () {
      var data = {
        dingUserId: this.dingUserId
      }
      updateByDingUser(data).then(res => {
        if (!res.success) {
          this.$notification['error']({
            message: '提示',
            description: res.messages,
            duration: 8
          })
        } else {
          this.$notification['success']({
            message: '提示',
            description: '成功',
            duration: 8
          })
        }
      })
    },
    // 查看
    onChangeRole (text) {
      this.visibleModifyRoleModal = true
      this.roleEdit.id = text.id
      this.roleSelectValue = text.roleIds
    },

    // 修改角色OK
    handleModifyRole () {
      updateUser(this.roleEdit)
        .then(res => {
          if (res.success) {
            this.reload()
          }
        })
        .catch(err => console.log(err))
    },
    // 修改角色关闭
    handleCancelModify (e) {
      this.visibleModifyRoleModal = false
    },
    // 用户分页
    pagination_user (pagination) {
      const pager = { ...this.pagination_shop }
      pager.pageNumber = pagination.current
      pager.pageSize = pagination.pageSize
      pager.current = pagination.current
      this.pagination_shop = pager
      this.searchList.pageNumber = pagination.current
      this.searchList.pageSize = pagination.pageSize
      this.queryData(this.searchList)
    },
    // 查看用户详情抽屉关闭
    onClose_view () {
      this.visibleModifyUser = false
    },
    // 点击查询按钮
    search_click () {
      this.searchList.pageNumber = 1
      this.searchList.pageSize = this.pagination_shop.pageSize
      this.pagination_shop.pageNumber = 1
      this.pagination_shop.current = 1
      this.queryData(this.searchList)
    },
    // 搜索的状态
    search_status (value) {
      this.searchList.status = value
      this.searchRoleStatus = value
    },
    // 搜索的角色下拉框
    search_roleSelect (value) {
      this.searchList.roleId = value
      this.searchRoleSelect = value
      this.roleEdit.roleIds = value
    },

    // 搜索的机构下拉框
    search_organization (value) {
      this.searchList.orgCode = value
    },
    // 查看详情
    onViewUser (text) {
      this.dingUserId = text.dingUserId
      var data = {
        id: text.id
      }
      findUser(data).then(res => {
        if (res.success) {
          this.findUserList = res.vo
        }
      })
      this.visibleModifyUser = true
    }
  }
}
</script>

<style lang="less" scoped>
.search_btn {
  margin-left: 100px;
  width: 100px;
  /deep/.ant-form-item-control-wrapper {
    width: 300px;
  }
}
.add_page_span span {
  font-weight: 700;
}
.overAll {
  width: 100%;
  padding-bottom: 30px;
  position: relative;
  background-color: white;
}

.ant-table-wrapper {
  background-color: white !important;
}

.search {
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
  padding: 20px;
}

.search .ant-row {
  padding-top: 10px;
}

.search .search_top {
  height: 50px;
  line-height: 50px;
}

.search_button {
  text-align: center;
}

.search_button button {
  padding: 5px 15px;
}

.search_button_on button {
  color: white;
  background-color: #1890ff;
  border: none;
  border-radius: 5px;
}

.search_button_reset button {
  border: none;
  border-radius: 5px;
}

.search_title {
  text-align: right;
  margin-right: 10px;
}

.content_table {
  width: 100%;
  margin-top: 20px;
}

.gray {
  width: 100%;
  height: 20px;
  background-color: #f0f2f5;
}

.w260 {
  width: 200px;
}

.w200 {
  width: 200px;
}

.w100 {
  width: 100px;
}

.w250 {
  width: 250px;
}

.search-op-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
